<mat-card>Items</mat-card>
<div class="content">
  <button mat-raised-button (click)="addSpecialOffer()">Add special offer</button>
  <button mat-raised-button (click)="cancelSpecialOffer()">Cancel special offer</button>
  <mat-progress-spinner *ngIf="!areItemsLoaded" mode="indeterminate">
  </mat-progress-spinner>
  <div *ngIf="areItemsLoaded">
    <table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> Index</th>
        <td mat-cell *matCellDef="let row"> {{row.id}}</td>
      </ng-container>

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name</th>
        <td mat-cell *matCellDef="let row"> {{row.name}}</td>
      </ng-container>

      <ng-container matColumnDef="quantity">
        <th mat-header-cell *matHeaderCellDef> Quantity</th>
        <td mat-cell *matCellDef="let row"> {{row.quantity}}</td>
      </ng-container>

      <ng-container matColumnDef="stockPrice">
        <th mat-header-cell *matHeaderCellDef> Stock price</th>
        <td mat-cell *matCellDef="let row"> {{row.stockPrice}}</td>
      </ng-container>

      <ng-container matColumnDef="originalPrice">
        <th mat-header-cell *matHeaderCellDef> Original price</th>
        <td mat-cell *matCellDef="let row"> {{row.originalPrice}}</td>
      </ng-container>

      <ng-container matColumnDef="currentPrice">
        <th mat-header-cell *matHeaderCellDef> Current price</th>
        <td mat-cell *matCellDef="let row"> {{row.currentPrice}}</td>
      </ng-container>

      <tr mat-header-row
        *matHeaderRowDef="['id', 'name', 'quantity', 'stockPrice', 'originalPrice', 'currentPrice']"></tr>
      <tr mat-row
        *matRowDef="let row; columns: ['id', 'name', 'quantity', 'stockPrice', 'originalPrice', 'currentPrice']"
        (click)="fetchItem(row.id)"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
    <button mat-raised-button (click)="addItem()">Add item</button>
  </div>
</div>
